<!--
 * @Date: 2023-01-09 21:30:55
 * @LastEditors: Zireael 1193875164@qq.com
 * @LastEditTime: 2023-04-05 19:48:17
 * @FilePath: \A19\frontend\src\components\login.vue
-->
<template>
  <div id="Login">
    <div id="container">
      <p>Login</p>
      <el-form :model="form" :rules="rules">
        <el-form-item label="" prop="email">
          <el-input v-model="form.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item label="" prop="password">
          <el-input type="password" show-password v-model="form.password" placeholder="请输入密码"></el-input>
        </el-form-item>

      </el-form>


      <div id="remember">
        <el-checkbox label="记住我" v-model="remember"></el-checkbox>
      </div>

      <div id="forget-password">
        <el-link href="#" type="primary" @click.prevent="router.push({name:'resetPassword'})">忘记密码</el-link>
      </div>


      <br>
      <div id="login">
        <el-button type="primary" size="large" @click="login"> 登录</el-button>
      </div>

      <br>

      <div id="register">
        <el-link href="#" type="primary" @click.prevent="router.push({name:'regist'})">注册</el-link>

      </div>


    </div>
  </div>
  <!-- <router-view>watch</router-view>
  <router-view>test</router-view> -->
</template>

<script lang="ts" setup>
import { useClientStore } from "@/pinia/stores/client";
import router from "@/route";
import { FormRules } from "element-plus";
import { fromPairs } from "lodash";
import { storeToRefs } from "pinia";
import { reactive, ref, onMounted } from 'vue';
const clientStore = useClientStore()
const { currentUser } = storeToRefs(clientStore)
const form = reactive({
  email: '',
  password: ''
})
const rules = reactive<FormRules>({

})
const remember = ref(false)

const store = useClientStore()
const client = store.client

const login = async () => {
  if (!form.email) return ElMessage.warning('请输入邮箱')
  if (!form.password) return ElMessage.warning('请输入密码')
  const ret = await client.callApi('Login/Login', form)
  if(ret.isSucc){
    ElMessage.success('登录成功')
    localStorage.setItem('token', ret.res.token || '')
    currentUser.value = ret.res.user
    //跳转
    router.push({
      name:'course'
    })
  }
}

onMounted(async () =>{
  const ret = await client.callApi("Login/TestToken", {});
  if (ret.isSucc) {
    clientStore.$patch({
      currentUser: ret.res.user as {
        _id: string;
        role: "teacher" | "student";
        school: string;
        name: string;
        portrait: string;
        email: string;
        number: string;
        gender: number;
      },
    });
    // nextTick(() =>{
    //   console.log(route.name);
      
    // })
    router.replace({
      name: "course",
    });
  }
})
</script>

<style lang="less" scoped>
* {
  padding: 0;
  margin: 0;
  text-decoration: none;

}

#container {
  position: absolute;
  top: 50%;
  // margin: 0 auto;
  margin-top: -200px;
  left: 50%;
  margin-left: -200px;
  //居中

  background-color: whitesmoke;
  width: 400px;
  height: 400px;
  border-radius: 10px;
  text-align: center;
  padding: 5px 40px;
  box-sizing: border-box;
  box-shadow: var(--el-box-shadow);

  #remember {
    position: relative;
    left: -125px;
  }

  #forget-password {
    position: relative;
    top: -28px;
    left: 130px;
  }

  #login {
    position: relative;
    top: -20px;
  }

  #customer {
    position: relative;
    top: -20px;
    left: -125px;
  }

  #register {
    position: relative;
    left: 145px;
    top: -45px;
  }


  .el-input {
    margin-bottom: 25px;
    height: 40px;
  }

  .el-button {
    width: 150px;
  }

  p {
    font-size: 42px;
    font-weight: 600;
    margin: 40px;
  }
}




</style>